<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>首页</title>
	<link rel="stylesheet" type="text/css" href="css/reset.css">
	<link rel="stylesheet" type="text/css" href="css/common.css">
	<link rel="stylesheet" type="text/css" href="css/index.css">
	<link rel="stylesheet" type="text/css" href="css/skin/skin_01.css" id="skinCss">
	<script src="js/jquery.js" type="text/javascript"></script>
	<!-- 使用jq的cookie插件保存风格设置 -->
	<script src="js/jquery.cookie.js" type="text/javascript"></script>
	<!-- 更换背景风格 -->
	<script src="js/changeSkin.js" type="text/javascript"></script>
	<!-- 输入框交互实现 -->
	<script src="js/input.js" type="text/javascript"></script>
	<!-- 导航菜单交互实现 -->
	<script src="js/nav.js" type="text/javascript"></script>
	<!-- 设置hot类 -->
	<script src="js/addHot.js" type="text/javascript"></script>
	<!-- 轮播广告交互实现 -->
	<script src="js/ad.js" type="text/javascript"></script>
	<!-- a标签提示交互实现 -->
	<script src="js/tooltip.js" type="text/javascript"></script>
	<!-- 图片滚动交互实现 -->
	<script src="js/imgSlider.js" type="text/javascript"></script>
</head>
<body>
	<!--头部-->
	<header class="header">
		<div class="header__wrap">
			<div class="header__logo"> 
				<h1>
					<a title="JQ_Shopping" href="index.html"><img alt="JQ_Shopping" src="img/logo.gif">
					</a>
				</h1> 
			</div><!--logo结束-->
			<div class="header__search-box">            
              	<input class="search-box__input" type="text" value="请输入商品名称" id="inputSearch01">
            </div><!--搜索框结束-->
			<ul class="header__skin">
				<li id="skin_01" class="skin__item skin__item_blue selected"  title="蓝色" ></li>
				<li id="skin_02" class="skin__item skin__item_violet"  title="紫色"></li>
				<li id="skin_03" class="skin__item skin__item_red"  title="红色"></li>
				<li id="skin_04" class="skin__item skin__item_sky-blue"  title="天蓝色"></li>
				<li id="skin_05" class="skin__item skin__item_orange"  title="橙色"></li>
				<li id="skin_06" class="skin__item skin__item_pale-green"  title="淡绿色"></li>
			</ul><!-id="skin_01" -风格框结束-->
			<nav class="header__nav">
				<ul>
					<li class="nav__item nav__item_top">
						<a href="javascript:;" class="item__a">首 页</a>
					</li>
					<li class="nav__item">
						<a href="javascript:;" class="item__a">品 牌</a>
						<div class="item__submenu" style="display:none;">
							<dl class="submenu__dl submenu__dl_top">
								<dt class="dl__dt"><a href="#">品 牌:</a></dt>
								<dd class="dl__dd">
									<a href="#nogo">耐克</a>
									<a href="#nogo">阿迪达斯</a>
									<a href="#nogo">达芙妮</a>
									<a href="#nogo">李宁</a>
									<a href="#nogo">安踏</a>
									<a href="#nogo">奥康</a>
									<a href="#nogo">骆驼</a>
									<a href="#nogo">特步</a>
									<a href="#nogo">淑女屋</a>
									<a href="#nogo">贵人鸟</a>
									<a href="#nogo">水晶鞋</a>
									<a href="#nogo">鸿星尔克</a>
									<a href="#nogo">鳄鱼</a>
								</dd>
							</dl>
							<dl class="submenu__dl">
								<dt class="dl__dt"><a href="#">品 牌:</a></dt>
								<dd class="dl__dd">
									<a href="#nogo">耐克</a>
									<a href="#nogo">阿迪达斯</a>
									<a href="#nogo">达芙妮</a>
									<a href="#nogo">李宁</a>
									<a href="#nogo">安踏</a>
									<a href="#nogo">奥康</a>
									<a href="#nogo">骆驼</a>
									<a href="#nogo">特步</a>
									<a href="#nogo">淑女屋</a>
									<a href="#nogo">贵人鸟</a>
									<a href="#nogo">水晶鞋</a>
									<a href="#nogo">鸿星尔克</a>
									<a href="#nogo">鳄鱼</a>
								</dd>
							</dl>
						</div>
					</li>
					<li class="nav__item">
						<a href="javascript:;" class="item__a">女 装</a>
						<div class="item__submenu" style="display:none;">
							<dl class="submenu__dl submenu__dl_top">
								<dt class="dl__dt"><a href="#">品 牌:</a></dt>
								<dd class="dl__dd">
									<a href="#nogo">耐克</a>
									<a href="#nogo">阿迪达斯</a>
									<a href="#nogo">达芙妮</a>
									<a href="#nogo">李宁</a>
									<a href="#nogo">安踏</a>
									<a href="#nogo">奥康</a>
									<a href="#nogo">骆驼</a>
									<a href="#nogo">特步</a>
									<a href="#nogo">淑女屋</a>
									<a href="#nogo">贵人鸟</a>
									<a href="#nogo">水晶鞋</a>
									<a href="#nogo">鸿星尔克</a>
									<a href="#nogo">鳄鱼</a>
								</dd>
							</dl>
							<dl class="submenu__dl">
								<dt class="dl__dt"><a href="#">品 牌:</a></dt>
								<dd class="dl__dd">
									<a href="#nogo">耐克</a>
									<a href="#nogo">阿迪达斯</a>
									<a href="#nogo">达芙妮</a>
									<a href="#nogo">李宁</a>
									<a href="#nogo">安踏</a>
									<a href="#nogo">奥康</a>
									<a href="#nogo">骆驼</a>
									<a href="#nogo">特步</a>
									<a href="#nogo">淑女屋</a>
									<a href="#nogo">贵人鸟</a>
									<a href="#nogo">水晶鞋</a>
									<a href="#nogo">鸿星尔克</a>
									<a href="#nogo">鳄鱼</a>
								</dd>
							</dl>
						</div>
					</li>
					<li class="nav__item">
						<a href="javascript:;" class="item__a">男 装</a>
						<div class="item__submenu" style="display: none;">
							<dl class="submenu__dl submenu__dl_top">
								<dt class="dl__dt"><a href="#">品 牌:</a></dt>
								<dd class="dl__dd">
									<a href="#nogo">耐克</a>
									<a href="#nogo">阿迪达斯</a>
									<a href="#nogo">达芙妮</a>
									<a href="#nogo">李宁</a>
									<a href="#nogo">安踏</a>
									<a href="#nogo">奥康</a>
									<a href="#nogo">骆驼</a>
									<a href="#nogo">特步</a>
									<a href="#nogo">淑女屋</a>
									<a href="#nogo">贵人鸟</a>
									<a href="#nogo">水晶鞋</a>
									<a href="#nogo">鸿星尔克</a>
									<a href="#nogo">鳄鱼</a>
								</dd>
							</dl>
							<dl class="submenu__dl">
								<dt class="dl__dt"><a href="#">品 牌:</a></dt>
								<dd class="dl__dd">
									<a href="#nogo">耐克</a>
									<a href="#nogo">阿迪达斯</a>
									<a href="#nogo">达芙妮</a>
									<a href="#nogo">李宁</a>
									<a href="#nogo">安踏</a>
									<a href="#nogo">奥康</a>
									<a href="#nogo">骆驼</a>
									<a href="#nogo">特步</a>
									<a href="#nogo">淑女屋</a>
									<a href="#nogo">贵人鸟</a>
									<a href="#nogo">水晶鞋</a>
									<a href="#nogo">鸿星尔克</a>
									<a href="#nogo">鳄鱼</a>
								</dd>
							</dl>
						</div>
					</li>
					<li class="nav__item">
						<a href="javascript:;" class="item__a">鞋包服饰</a>
						<div class="item__submenu" style="display: none;">
							<dl class="submenu__dl submenu__dl_top">
								<dt class="dl__dt"><a href="#">品 牌:</a></dt>
								<dd class="dl__dd">
									<a href="#nogo">耐克</a>
									<a href="#nogo">阿迪达斯</a>
									<a href="#nogo">达芙妮</a>
									<a href="#nogo">李宁</a>
									<a href="#nogo">安踏</a>
									<a href="#nogo">奥康</a>
									<a href="#nogo">骆驼</a>
									<a href="#nogo">特步</a>
									<a href="#nogo">淑女屋</a>
									<a href="#nogo">贵人鸟</a>
									<a href="#nogo">水晶鞋</a>
									<a href="#nogo">鸿星尔克</a>
									<a href="#nogo">鳄鱼</a>
								</dd>
							</dl>
							<dl class="submenu__dl">
								<dt class="dl__dt"><a href="#">品 牌:</a></dt>
								<dd class="dl__dd">
									<a href="#nogo">耐克</a>
									<a href="#nogo">阿迪达斯</a>
									<a href="#nogo">达芙妮</a>
									<a href="#nogo">李宁</a>
									<a href="#nogo">安踏</a>
									<a href="#nogo">奥康</a>
									<a href="#nogo">骆驼</a>
									<a href="#nogo">特步</a>
									<a href="#nogo">淑女屋</a>
									<a href="#nogo">贵人鸟</a>
									<a href="#nogo">水晶鞋</a>
									<a href="#nogo">鸿星尔克</a>
									<a href="#nogo">鳄鱼</a>
								</dd>
							</dl>
						</div>
					</li>
				</ul>
			</nav><!--nav结束-->
		</div><!--wrap结束-->		
	</header>
	<!--中间内容区-->
	<section class="content">
		<aside class="content__aside">
			<h2 class="aside__title" title="商品分类">商品分类</h2>
			<dl class="aside__list">
				<dt class="list__title">推荐品牌</dt>
				<dd class="list__content">
					<a href="#nogo">耐克</a>
					<a href="#nogo" class="hot">阿迪达斯</a>
					<a href="#nogo">达芙妮</a>
					<a href="#nogo">李宁</a>
					<a href="#nogo">奥康</a>
					<a href="#nogo">安踏</a>
					<a href="#nogo" class="hot">特步</a>
					<a href="#nogo">骆驼</a>
				</dd>
			</dl>
			<dl class="aside__list">
				<dt class="list__title">女装</dt>
				<dd class="list__content">
					<a href="#nogo">呢大衣</a>
					<a href="#nogo">T恤</a>
					<a href="#nogo" class="hot">羽绒</a>
					<a href="#nogo">衬衫</a>
					<a href="#nogo">羊绒衫</a>
					<a href="#nogo">针织</a>
					<a href="#nogo">连衣裙</a>
					<a href="#nogo">皮外套</a>
				</dd>
			</dl>
			<dl class="aside__list">
				<dt class="list__title">男装</dt>
				<dd class="list__content">
					<a href="#nogo">衬衫</a>
					<a href="#nogo">T恤衫</a>
					<a href="#nogo">夹克</a>
					<a href="#nogo">大皮衣</a>
					<a href="#nogo" class="hot">风衣</a>
					<a href="#nogo">牛仔裤</a>
					<a href="#nogo">西服</a>
					<a href="#nogo">卫衣</a>
				</dd>
			</dl>
			<dl class="aside__list">
				<dt class="list__title">鞋包配饰</dt>
				<dd class="list__content" >
					<a href="#nogo">围巾</a>
					<a href="#nogo">旅行箱</a>
					<a href="#nogo">真皮包</a>
					<a href="#nogo">韩版</a>
					<a href="#nogo">达芙妮</a>
					<a href="#nogo">单肩包</a>
					<a href="#nogo">毛线</a>
					<a href="#nogo" class="hot">清仓靴子</a>
				</dd>
			</dl>
		</aside><!--侧边栏结束-->
		<div class="content__right">
			<div class="content__right-top">
				<!-- 大屏广告 start -->
				<div class="content__ad">
					<a href="./detail.html" class="ad__imgList">
						<img src="img/ads/1.jpg" alt="相约情人节"/>
						<img src="img/ads/2.jpg" alt="新款上线"/>
						<img src="img/ads/3.jpg" alt="愤怒小鸟特卖"/>
						<img src="img/ads/4.jpg" alt="女鞋促销第一波"/>
						<img src="img/ads/5.jpg" alt="春季新品发布"/>
					</a>
					<div class="ad__tabs">
						<a href="###1" class="chos"><em>相约情人节</em><em>全场119元起</em></a>
						<a href="###2"><em>新款上线</em><em>全场357元起</em></a>
						<a href="###3"><em>愤怒小鸟特卖</em><em>全场89元</em></a>
						<a href="###4"><em>男鞋促销第一波</em><em>全场3.1折起</em></a>
						<a href="###5" class="last"><em>春季新品发布</em><em>全场4.1折起</em></a>
					</div>
				</div>
				<!-- 大屏广告 end -->
				<div class="content__promotion">
					<div class="promotion__adv">
						<img src="img/upload/20120216.jpg" alt="冬品清仓" width="230" height="176">
					</div>					
					<dl class="promotion__news">
						<dt class="news__title">最新动态</dt>
						<dd class="news__content">
							<a href="#nogo" title="伊伴春鞋迎春大促">[活动] 伊伴春鞋迎春大促</a>
							<a href="#nogo" title="千百度冬靴新品火热让利">[活动] 千百度冬靴新品火热让利</a>
							<a href="#nogo" title="COEY秋冬新品全场2.3折起">[活动] COEY秋冬新品全场2.3折起</a>
							<a href="#nogo" title="伊伴春鞋迎春大促">[活动] 伊伴春鞋迎春大促</a>
							<a href="#nogo" title="千百度冬靴新品火热让利">[活动] 千百度冬靴新品火热让利</a>
						</dd>
					</dl>
				</div>
			</div><!--右边上结束-->
			<div class="content__right-tab">
				<dt class="tab__top">品牌活动
					<ul class="tab__top__menu">
						<li class="menu__item select"><a href="#nogo">运动</a></li>
						<li class="menu__item"><a href="#nogo">女鞋</a></li>
						<li class="menu__item"><a href="#nogo">男鞋</a></li>
						<li class="menu__item"><a href="#nogo">童鞋</a></li>
					</ul>	
				</dt>
				<dd class="tab__content">
					<figure>
					  <img src="./img/upload/20120217.jpg" alt="耐克图片" width="183" height="164">
					  <figcaption><a href="#nogo">耐克</a></figcaption>
					</figure>
					<figure>
					  <img src="./img/upload/20120218.jpg" alt="阿迪达斯图片" width="183" height="164">
					  <figcaption><a href="#nogo">阿迪达斯</a></figcaption>
					</figure>
					<figure>
					  <img src="./img/upload/20120219.png" alt="李宁图片" width="183" height="164">
					  <figcaption><a href="#nogo">李宁</a></figcaption>
					</figure>
					<figure>
					  <img src="./img/upload/20120220.png" alt="安踏图片" width="183" height="164">
					  <figcaption><a href="#nogo">安踏</a></figcaption>
					</figure>
					<figure>
					  <img src="./img/upload/20120217.jpg" alt="耐克图片" width="183" height="164">
					  <figcaption><a href="#nogo">耐克</a></figcaption>
					</figure>
					<figure>
					  <img src="./img/upload/20120218.jpg" alt="阿迪达斯图片" width="183" height="164">
					  <figcaption><a href="#nogo">阿迪达斯</a></figcaption>
					</figure>  
					<figure>
					  <img src="./img/upload/20120219.png" alt="李宁图片" width="183" height="164">
					  <figcaption><a href="#nogo">李宁</a></figcaption>
					</figure>
					<figure>
					  <img src="./img/upload/20120220.png" alt="安踏图片" width="183" height="164">
					  <figcaption><a href="#nogo">安踏</a></figcaption>
					</figure>
					<figure>
					  <img src="./img/upload/20120217.jpg" alt="耐克图片" width="183" height="164">
					  <figcaption><a href="#nogo">耐克</a></figcaption>
					</figure>
					<figure>
					  <img src="./img/upload/20120218.jpg" alt="阿迪达斯图片" width="183" height="164">
					  <figcaption><a href="#nogo">阿迪达斯</a></figcaption>
					</figure>
					<figure>
					  <img src="./img/upload/20120219.png" alt="李宁图片" width="183" height="164">
					  <figcaption><a href="#nogo">李宁</a></figcaption>
					</figure>
					<figure>
					  <img src="./img/upload/20120220.png" a安踏lt="图片" width="183" height="164">
					  <figcaption><a href="#nogo">安踏</a></figcaption>
					</figure>
					<figure>
					  <img src="./img/upload/20120217.jpg" alt="耐克图片" width="183" height="164">
					  <figcaption><a href="#nogo">耐克</a></figcaption>
					</figure>
					<figure>
					  <img src="./img/upload/20120218.jpg" alt="阿迪达斯图片" width="183" height="164">
					  <figcaption><a href="#nogo">阿迪达斯</a></figcaption>
					</figure>
					<figure>
					  <img src="./img/upload/20120219.png" alt="李宁图片" width="183" height="164">
					  <figcaption><a href="#nogo">李宁</a></figcaption>
					</figure>
					<figure>
					  <img src="./img/upload/20120220.png" alt="安踏图片" width="183" height="164">
					  <figcaption><a href="#nogo">安踏</a></figcaption>
					</figure>
				</dd>
			</div>
		</div>
	</section>
	<!--尾部-->
	<footer class="footer">Copyright © 2009 - 2012 JaneShop Inc.</footer>
</body>
</html>